<template>
    <div class="business_process">
        <ZwSearchForm row-num="3" :option="formSearchOption" @search="search" @reset="reset" />
        <ZwTable
            ref="tableRef"
            class="table-box"
            tab-h="initial"
            :option="tableOption"
            :fetch-params="state.searchParams"
            :fetch-api="fetchApi()">
            <template #headerOperate>
                <el-button type="primary" @click="handleTable('CREATE')">新建流程</el-button>
            </template>
        </ZwTable>
        <ProcessCreate ref="ProcessCreateRef" @submit="reloadTable" />
        <ProcessRules ref="ProcessRulesRef" @submit="reloadTable" />
        <ZWDeletdialog ref="ZWDeletdialogRef" @submit="handleFun" />
    </div>
</template>

<script lang="ts" setup>
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';
import { useSubmitContent, tableOption } from './ProcessList';
import ProcessCreate from './ProcessCreate.vue';
import ProcessRules from './ProcessRules.vue';
import ZWDeletdialog from '@/components/ZWDeletdialog.vue';
import { getWorkflowList, workflowOperate, workflowDelete } from '@/api/salesleads/salesmanagement/business';
import { reactive, ref, onActivated } from 'vue';
import { ElMessage } from 'element-plus';
import { deepCopy } from '@/utils/helper';
const ProcessCreateRef = ref<any>();
const ProcessRulesRef = ref<any>();
const tableRef = ref<any>();

const requestFlag = ref<boolean>(false);
const currentParams = ref<any>(null);

const defaultParams = reactive({
    name: '',
    state: ''
});
const formSearchOption = [
    {
        label: '流程名称',
        name: 'name',
        value: '',
        type: 'input',
        placeholder: '请输入流程名称'
    },
    {
        label: '流程状态',
        name: 'state',
        value: '',
        placeholder: '请选择流程状态',
        type: 'select',
        optionList: [
            { name: '已开启', value: 2 },
            { name: '已关闭', value: 1 }
        ],
        formatOption: (v: any) => ({
            label: v.name,
            value: v.value
        })
    }
];
const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const search = (v: any) => {
    currentParams.value = v;
    state.searchParams = { ...deepCopy(defaultParams), ...v };
};
const reset = (v: any) => {
    state.searchParams = { ...deepCopy(defaultParams) };
    currentParams.value = null;
};
const tableData = ref([]);
// 刷新表格
const reloadTable = () => {
    tableRef.value.reload();
};

const fetchApi = () => {
    // 获取文件列表
    // return getFissionList
    return getWorkflowList;
};

const ZWDeletdialogRef = ref<any>(null);
let pageType = '';
const rowData = ref<any>({});
const onStatus = (row: any) => {
    if (row.state == 2) {
        pageType = 'STATE';
        rowData.value = row;
        ZWDeletdialogRef.value.appDialog.title = '关闭提醒';
        ZWDeletdialogRef.value.appDialog.visible = true;
        ZWDeletdialogRef.value.content = `关闭后，应用此商机流程的进行阶段的商机将暂停切换阶段状态，创建新的商机时也不能应用此商机流程。您确定要关闭【${rowData.value.name}】吗？`;
    } else {
        handleTable('STATUS', row);
    }
};
// 弹框二次确认
const handleFun = () => {
    pageType == 'STATE' && handleTable('STATUS', rowData.value);
    pageType == 'DELETE' && handleTable('DELETE', rowData.value);
};
const onDelete = (row: any) => {
    pageType = 'DELETE';
    rowData.value = row;
    ZWDeletdialogRef.value.appDialog.title = '删除提醒';
    ZWDeletdialogRef.value.appDialog.visible = true;
    ZWDeletdialogRef.value.content = `删除后，应用此商机流程的进行阶段的商机将会被重置到默认流程的初始阶段。您确定要删除【${row.name}】吗？`;
};
const handleTable = (type: any, row?: any) => {
    const obj = {
        STATUS: () =>
            workflowOperate({ workflow_id: row.id, state: row.state == 1 ? 2 : 1 })
                .then((res: any) => {
                    ElMessage.success(`${row.state == 1 ? '开启' : '关闭'}成功`);
                    reloadTable();
                })
                .catch((err: any) => {
                    reloadTable();
                }),
        DELETE: () =>
            workflowDelete({ workflow_id: row.id }).then((res: any) => {
                ElMessage.success('删除成功');
                reloadTable();
            }),
        RULES: () => ProcessRulesRef.value.onRulesDShow(row),
        CREATE: () => ProcessCreateRef.value.onProcessShow('CREATE'),
        LOOK: () => ProcessCreateRef.value.onProcessShow('LOOK', row),
        EDIT: () => ProcessCreateRef.value.onProcessShow('EDIT', row),
        onStatus: () => onStatus(row),
        onDelete: () => onDelete(row)
    };
    obj[type]();
};
useSubmitContent.submit = handleTable;
const onCreate = () => {
    ProcessCreateRef.value.onProcessShow();
};

onActivated((val: any) => {
    tableRef.value.getTable().clearSelection();
    state.searchParams = { ...deepCopy(defaultParams), ...currentParams.value };
});
</script>

<style lang="scss" scoped>
.business_process {
    height: calc(100vh - 232px);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .zw-table {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;

        :deep(.el-table) {
            flex: 1;

            .el-table__empty-block {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}

:deep(.employee_box) {
    display: flex;
    display: -webkit-box; //谷歌
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; //显示几行
    overflow: hidden;
}

.search_box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 16px;
    background-color: #f9f9f9;

    .el-form-item {
        text-align: right;
        margin-bottom: 0;

        .el-select {
            width: 100%;
        }
    }
}

.btn_box {
    padding: 10px 24px 10px 0;
    text-align: right;
}

:deep(.switch) {
    position: relative;

    .switch_msk {
        width: 42px;
        height: 22px;
        position: absolute;
        top: 0;
        cursor: pointer;
    }
}

:deep(.step_box) {
    padding: 5px 0;
    height: 70px;
    display: flex;
    line-height: 1;
    transform: translateX(-74px);

    .step {
        min-width: 160px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;

        .num_current {
            width: 29px;
            height: 29px;
            line-height: 29px;
            text-align: center;
            border-radius: 50%;
            background: #ff6b00;
            color: #fff;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

            &::after {
                content: '';
                width: 125px;
                border-bottom: 1px dashed #2222237d;
                position: absolute;
                top: 15px;
                left: 32px;
            }
        }

        .num_current_last {
            width: 29px;
            height: 29px;
            line-height: 29px;
            text-align: center;
            border-radius: 50%;
            background: #ff6b00;
            color: #fff;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .title {
            color: #000000c9;
            font-weight: 500;
        }

        .desc {
            font-size: 12px;
            color: #00000078;
        }
    }
}
</style>
